import React from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    Button,
    View,
    Image
} from 'react-native';

import XmgHome from "./home/XmgHome";
import XmgShop from "./shop/XmgShop";
import XmgMore from "./more/XmgMore";
import XmgMine from "./mine/XmgMine";
import XmgLogin from "./mine/XmgLogin";
import XmgWelcome from "./mine/XmgWelcome";
import ColorStyles from './common/ColorStyles';

import {TabNavigator, TabBarBottom, createStackNavigator} from 'react-navigation'; // 1.0.0-beta.27


var png0 = require('../image/png0.png');
var png1 = require('../image/png1.png');
var png2 = require('../image/png2.png');
var png3 = require('../image/png3.png');

// class DetailsScreen extends React.Component {
//     render() {
//         return (
//             <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
//                 <Text>DetailsScreen</Text>
//                 <Button
//                     title="Go to Details... again"
//                     onPress={() => this.props.navigation.navigate('Details')}
//                 />
//                 <Button
//                     title="push to Details... again"
//                     onPress={() => this.props.navigation.push('Details')}
//                 />
//
//                 <Button
//                     title="Go to Home"
//                     onPress={() => this.props.navigation.navigate('home')}
//                 />
//                 <Button
//                     title="Go back"
//                     onPress={() => this.props.navigation.goBack()}
//                 />
//             </View>
//         );
//     }
// }

// export default createStackNavigator({
//     Home: {
//         screen: HomeScreen
//     },
// });
//

// const RootStack = createStackNavigator(
//     {
//         home: XmgHome,
//         shop: XmgShop,
//         more: XmgMore,
//         mine: XmgMine,
//     },
//     {
//         initialRouteName: 'home',
//         navigationOptions: {//公共的header设置
//             headerStyle: {
//                 backgroundColor: '#f4511e',
//             },
//             headerTintColor: '#fff',
//             headerTitleStyle: {
//                 fontWeight: 'bold',
//             },
//         },
//     }
// );

// const RootStack = createStackNavigator({
//     Home: HomeScreen,
// });


// const RootStack = createStackNavigator({
//     Home: {
//         screen: HomeScreen
//     },
// });


//
// export default class App extends React.Component {
//     render() {
//         return <RootStack/>;
//     }
// }


const tabNavigator = TabNavigator(
    {
        home: XmgHome,
        more: XmgMore,
        shop: XmgShop,
        mine: XmgMine,
    },
    {
        initialRouteName: 'shop',
        navigationOptions: ({navigation}) => ({
            tabBarOnPress: (obj) => {
                // alert(JSON.stringify(obj));
                // alert(a.scene.routeName)
                if (obj.scene.index == 1) {
                    navigation.navigate('login')
                } else {
                    obj.jumpToIndex(obj.scene.index)
                }
            },

            tabBarIcon: ({focused, tintColor}) => {
                const {routeName} = navigation.state;
                let iconName;
                if (routeName === 'home') {
                    iconName = png0;
                } else if (routeName === 'more') {
                    iconName = png1;
                } else if (routeName === 'shop') {
                    iconName = png2;
                } else {
                    iconName = png3;
                }

                // You can return any component that you like here! We usually use an
                // icon component from react-native-vector-icons
                // return <Ionicons name={iconName} size={25} color={tintColor} />;
                return <Image source={iconName} style={{width: 26, height: 26}}/>;
            },

        }),

        backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',

        tabBarOptions: {
            activeTintColor: 'red',
            showLabel: true,
            inactiveTintColor: 'gray',
            labelStyle: {
                fontSize: 11,
            }, //label的样式。
            style: {
                backgroundColor: 'white',
                // width:130,
                height: 50,
            },
            tabStyle: {
                // backgroundColor: 'orange',
                // height: 30,
                // width:30,
            }
        },

        animationEnabled: false,
        swipeEnabled: true,
    }
);

export default App = createStackNavigator({
    main: {
        screen: tabNavigator,
    },
    login: {
        screen: XmgLogin,
    },
    welcome: {
        screen: XmgWelcome
    }
}, {
    initialRouteName: 'main',
    navigationOptions: ({
        header: null,
        headerStyle: {
            backgroundColor: ColorStyles.global,
        },
        headerTitleStyle: {
            color: 'white',
            fontSize: 20,
            flex: 1,
            textAlign: 'center',
            alignSelf: 'center',
        },
        headerTintColor: 'white',

    }),
    mode: 'card',
    headerMode: 'float',

})

